<template>
	<view class="box">
		<view class="none tr" style="margin-top: 100rpx;" v-if="!shopList.length">
			没有相似产品哦~
		</view>
		<view class="list2 fw-bt" v-else>
			<view class="shop-demo" v-for="(item,index) of shopList" :key="index"
				@click="goShopDetail(item.product_id)">
				<!--图片 -->
				<view class="shop-img f-w">
					<image :src="item.image" mode=""></image>
				</view>
				<!-- 名字 -->
				<view class="shop-name hide-line2 bold f28">{{item.store_name}}</view>
				<!-- 店名 -->
				<view class="shop-name2 hide-line2">
					{{item.merchant.mer_name}}
				</view>
				<view class="shop-price fw-bt c3">
					<!-- 价格 -->
					<view class="f-w">
						<view class="f24">￥</view>
						<view class="bold f28">{{item.price}}</view>
					</view>
					<!-- 购买按钮 -->
					<!-- <view class="shop-btn" @click.stop="addCart(item)">
						<image src="https://jw.xzsw2021.com/static/index/icon_49@2x.png" mode=""></image>
					</view> -->
					<view class="" @click.stop>
						<rules :product_id="item.product_id">
							<view class="shop-btn" style="z-index: 9999;">
								<image src="https://jw.xzsw2021.com/static/index/icon_49@2x.png" mode=""></image>
							</view>
						</rules>
					</view>




				</view>
				<!-- 商品图标 -->
				<view class="shop-tag">
					<image :src="tb" mode=""></image>
				</view>
				<!-- 精选好物 -->
				<view class="shop-good" v-if="item.is_best">
					<image :src="hw" mode=""></image>
				</view>
				<!-- 最近浏览过 -->
				<!-- <view class="shop-history c3 f22" v-if="item.desc">{{item.desc}}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import rules from '@/components/rules.vue'
	import {
		getProductSpuListApi
	} from '@/api/product.js'
	import Cache from '@/util/cache.js'
	import {
		addCartApi
	} from '@/api/cart.js'
	export default {
		components: {
			rules
		},
		data() {
			return {
				hw: 'https://jw.xzsw2021.com/static/index/icon_54@2x.png',
				tb: 'https://jw.xzsw2021.com/static/index/tx_3@2x.png',
				shopList: [], //商品列表
				search: {
					limit: 15,
					page: 1,
					order: 'price_asc',
					cate_id: '',
					mar_id: ''
				},
				market: {}
			}
		},
		onLoad(e) {
			let mar = JSON.parse(Cache.get('market'))
			this.market = mar
			this.search.mar_id = mar.id
			this.search.cate_id = e.cate_id
			this.proudctList()
		},
		onReachBottom() {
			this.search.page += 1
			this.proudctList()
		},
		created() {

		},
		methods: {
			proudctList() {
				getProductSpuListApi(this.search).then(res => {
					this.shopList.push(...res.data.list)
				}).catch(err => {

				})
			},

			// 去商品详情
			goShopDetail(id) {
				console.log('购买商品');
				uni.navigateTo({
					url: `/pages/client/shop/shop-detail/shop-detail?id=${id}`
				})
			},
			// 加入购物车
			addCart(item) {
				let data = {
					cart_num: 1,
					is_new: 0,
					product_attr_unique: item.productAttrValue.attrValue[0].unique,
					product_id: item.product_id
				}
				addCartApi(data).then(res => {
					uni.showToast({
						title: '添加成功'
					})
				}).catch(err => {

				})
				console.log('加入购物车', item);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding: 20rpx 20rpx 120rpx;

		.shop-btn {
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.c1 {
			color: #109C7A;
			font-weight: bold;
		}

		.c2 {
			color: #FCA223;
		}

		.c3 {
			color: #F45E14;
		}

		.list2 {
			flex-wrap: wrap;
			overflow: hidden;

			&>view {
				position: relative;
				margin-bottom: 20rpx;
				width: 344rpx;
				padding: 55rpx 26rpx 40rpx;
				min-height: 568rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;

				.shop-img {
					width: 284rpx;
					height: 284rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-name {
					margin: 20rpx 0 10rpx;
				}

				.shop-name2 {
					height: 64rpx;
					font-size: 24rpx;
					color: #666;
				}

				.shop-price {
					// margin-top: 28rpx;
				}

				.shop-tag {
					position: absolute;
					top: 16rpx;
					left: 16rpx;
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-good {
					position: absolute;
					top: 0;
					right: 16rpx;
					width: 53rpx;
					height: 71rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-history {
					position: absolute;
					top: 12rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 180rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}
</style>
